<template>
  <div>
    <van-nav-bar
      fixed
      z-index="1000"
      border
      left-arrow
      @click-left="$router.back()"
      placeholder
      title="选择门店"
    />

    <van-cell-group>
      <van-cell class="gray" :title="city" />
    </van-cell-group>
    <!--   数据 -->
    <div class="shop-list" v-if="status == 'loaded'">
      <div class="shop-item" v-for="item in shopList" :key="item._id" @click="chooseShop(item)">
        <div class="shop-item-name">
          {{ item.name }}
        </div>
        <div class="shop-item-addr">
          {{ item.address }}
        </div>
      </div>
    </div>

    <!-- 加载中 -->
    <div v-if="status == 'loading'" class="text-center">
      <van-loading type="spinner" color="#DB281F" />
    </div>

    <!-- 空 -->
    <!-- status -->
    <van-empty v-if="status == 'empty'" image="search" description="暂无门店" />
  </div>
</template>

<script>
import { Empty, Loading } from "vant";
export default {
  name: "shopList",
  data() {
    return {
      status: "loading",
      shopList: [],
    };
  },
  components: {
    [Loading.name]: Loading,
    [Empty.name]: Empty,
  },
  mounted() {
    this.getShopList();
  },
  computed: {
    city() {
      return this.$route.query.city;
    },
  },
  methods: {
    getShopList() {
      let { city } = this;
      this.$http.get(`/shop/pub/getList?city=${city}`).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.shopList = res.rows;
          // if(this.shopList.length){
          //     this.status = 'loaded'
          // }else{
          //      this.status = 'empty'
          // }

          this.status = this.shopList.length ? "loaded" : "empty";
        }
      });
    },
    //  选择门店
    chooseShop(item){

      console.log(item);
      let {name,_id} = item;
      //  把数据存起来 
      localStorage.setItem('shopName',name)
      localStorage.setItem('shopId',_id)
      localStorage.setItem('shopInfo',JSON.stringify(item))
       this.$router.replace('/')
    }
  },
};
</script>

<style scoped lang="less">
.gray {
  background: #f3f3f3;
}

.shop-list {
  padding: 10px;
  background: #fff;
}
.shop-item {
  padding: 5px 0;

  border-bottom: 1px solid #ccc;
  &-name {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    margin: 3px 0;
  }
  &-addr {
    color: #999;
  }
}
</style>